<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.css" rel="stylesheet" />
	<style>
		#gouwuche{
			text-align: center;
			position: fixed;
			z-index: 1000;
			bottom: 12%;
			width: 25%;	
    		line-height: 25px;
    		background-color: #007AFF;
			height: 50px;

    	}
		#gouwuche img{
			margin-top: 6px;
		}
		#gouwuche:active{
			background-color: #0062CC;
		}
		
		
		.mui-btn-purple,.mui-btn-royal{
			color:#fff;border:1px solid #8a6de9;background-color:#8a6de9
			}
		.mui-btn-purple.mui-active:enabled,.mui-btn-purple:enabled:active,.mui-btn-royal.mui-active:enabled,.mui-btn-royal:enabled:active{
			color:#fff;border:1px solid #6641e2;background-color:#6641e2
			}
		.mui-numbox
		{
		    position: relative;
		
		    display: inline-block;
		    overflow: hidden;
		
		    width: 110px;
		    height: 25px;
		    padding: 0 40px 0 40px;
			border: none;
		    vertical-align: top;
		    vertical-align: middle;
		    background-color: transparent;
		}
		.mui-numbox [class*=numbox-btn], .mui-numbox [class*=btn-numbox]
		{
		    font-size: 18px;
		    font-weight: normal;
		    line-height: 100%;
		
		    position: absolute;
		    top: 0;
		
		    overflow: hidden;
		
		    width: 25px;
			height: 25px;
		    padding: 0;
		
		    color: white;
		    border: none;
		    border-radius: 50%;
		    background-color: #007aff;
		}
		.mui-numbox [class*=numbox-btn]:active, .mui-numbox [class*=btn-numbox]:active
		{
			color: #007aff;
			border: #007aff 1px solid;
		    background-color: transparent;
		}
		.mui-numbox [class*=numbox-btn][disabled], .mui-numbox [class*=btn-numbox][disabled]
		{
			display: none;
		    color: transparent;
		}

		.mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
		{
		    display: inline-block;
		    overflow: hidden;
		
		    width: 100% !important;
		    height: 100%;
		    margin: 0;
		    padding: 0 3px !important;
		
		    text-align: center;
		    text-overflow: ellipsis;
		    word-break: normal;
			background-color: transparent;
		    border: none !important;
		}
		
		.mui-input-row .mui-numbox
		{
		    float: right;
		
		    margin: 2px 8px;
		}
		
		.reslogo{
			float: left;
			max-width: 70px;
			margin-right: 7px;
			border-radius: 50%;
		}
		.mui-control-content {
			background-color: white;
			min-height: 400px;
		}
		.mui-control-content .mui-loading {
			margin-top: 50px;
		}
		
		.mui-row.mui-fullscreen>[class*="mui-col-"] {
			height: 89%;
		}
		
		.mui-col-xs-3,
		.mui-col-xs-9 {
			overflow-y: auto;
			height: 100%;
		}
		
		.mui-segmented-control .mui-control-item {
			font-size: 14px;
			line-height: 50px;
			width: 100%;
		}
		
		.mui-control-content {
			display: block;
		}
		
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			background-color: #fff;
		}
	</style>
</head>

<body>


<!-- CONTENT -->
<div class="mui-content mui-row mui-fullscreen">
	<!-- 标题填充 -->
	<div style="text-align: center;">
		<div id="title_plus1" style="height: 50px;;width:100%;margin-bottom: -30px;"></div>
		<div id="title_plus2" style="height: 140px;border-radius:40%;width:100%;margin: -70px 0 -30px 0;"></div>
		<img style="height: 100px;margin-top: -70px;" id="resimg" src="">
	</div>
	
	<!-- 购物车 -->
	
	<div id="gouwuche">
		<img width="40px" src="../images/restaurant/gouwuche.png">
	</div>
	
	
	<!-- 商家推荐 -->
	<div class="mui-slider" style="margin-bottom: 10px;">
		<h4>商家推荐</h4>
		<div class="mui-slider-group mui-slider-loop">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/lamian.jpg">
							<div class="mui-media-body">兰州拉面</div>
							<p style="font-size: 10px;">月售3552</p>
							<p style="color: red;font-size: 18px;">￥9</p>
							</a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/niurouchaofan.jpg">
							<div class="mui-media-body">牛肉炒饭</div>
							<p style="font-size: 10px;">月售1252</p>
							<p style="color: red;font-size: 18px;">￥10</p>
							</a></li>
				</ul>
			</div>
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/niuroubao.jpg">
							<div class="mui-media-body">牛肉堡</div>
							<p style="font-size: 10px;">月售210</p>
							<p style="color: red;font-size: 18px;">￥7</p>
							</a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/shangxiaojikuai.jpg">
							<div class="mui-media-body">上校鸡块</div>
							<p style="font-size: 10px;">月售623</p>
							<p style="color: red;font-size: 18px;">￥4</p>
							</a></li>
							
				</ul>
			</div>
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/jituifan.jpg">
							<div class="mui-media-body">奥尔良鸡腿饭</div>
							<p style="font-size: 10px;">月售652</p>
							<p style="color: red;font-size: 18px;">￥12</p>
							</a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/huangmenjimifan.jpg">
							<div class="mui-media-body">黄焖鸡米饭</div>
							<p style="font-size: 10px;">月售3652</p>
							<p style="color: red;font-size: 18px;">￥12</p>
							</a></li>
				</ul>
			</div>
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/lamian.jpg">
							<div class="mui-media-body">兰州拉面</div>
							<p style="font-size: 10px;">月售3552</p>
							<p style="color: red;font-size: 18px;">￥9</p>
							</a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/niurouchaofan.jpg">
							<div class="mui-media-body">牛肉炒饭</div>
							<p style="font-size: 10px;">月售1252</p>
							<p style="color: red;font-size: 18px;">￥10</p>
							</a></li>
				</ul>
			</div>
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/niuroubao.jpg">
							<div class="mui-media-body">牛肉堡</div>
							<p style="font-size: 10px;">月售210</p>
							<p style="color: red;font-size: 18px;">￥7</p>
							</a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/restaurant/shangxiaojikuai.jpg">
							<div class="mui-media-body">上校鸡块</div>
							<p style="font-size: 10px;">月售623</p>
							<p style="color: red;font-size: 18px;">￥4</p>
							</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 商家推荐 END-->
	
	<!-- 餐品列表 -->
	<div class="mui-col-xs-3">
		<!-- 左侧 -->
		<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
			<a class="mui-control-item mui-active" data-index="0" href="#content1">热销</a>
			<a class="mui-control-item" data-index="1" href="#content2">优惠</a>
			<a class="mui-control-item" data-index="2" href="#content3">汉堡主食</a>
			<a class="mui-control-item" data-index="3" href="#content4">经典小吃</a>
			<a class="mui-control-item" data-index="4" href="#content5">盖饭</a>
			<a class="mui-control-item" data-index="5" href="#content6">水饺</a>
			<a class="mui-control-item" data-index="6" href="#content7">配料</a>
		</div>
	</div>
	<!-- 右侧 -->
	<div id="segmentedControlContents" class="mui-col-xs-9"">
		<!-- 第一个选项卡右侧 -->
		<div id="content1" class="mui-control-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/jituifan.jpg">
						<div style="font-size: 15px;">
							奥尔良鸡腿饭<span style="color:red;font-size:30px;float:right;">12</span><span style="color:red;font-size:15px;float:right;">￥</span>
							<p style="font-size: 10px;">食材：鸡腿肉、米饭</p>
							<p style="font-size: 10px;">月售3172</p>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<p><span class="mui-badge mui-badge-danger">8折</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/niurouchaofan.jpg">
						<div style="font-size: 17px;">
							牛肉炒饭<span style="color:red;font-size:30px;float:right;">10</span><span style="color:red;font-size:15px;float:right;">￥</span>
							<p style="font-size: 10px;">食材：牛肉、鸡蛋、米饭</p>
							<p style="font-size: 10px;">月售3172</p>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<p><span class="mui-badge mui-badge-danger">8折</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/malatang.jpg">
						<div style="font-size: 17px;">
							川味麻辣烫
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥17 配送￥1<span style="float: right;">34分钟</span></p>
							<p><span class="mui-badge mui-badge-danger">麻辣烫</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">17减1</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/malatang.jpg">
						<div style="font-size: 17px;">
							川味麻辣烫
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥17 配送￥1<span style="float: right;">34分钟</span></p>
							<p><span class="mui-badge mui-badge-danger">麻辣烫</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">17减1</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="川味麻辣烫" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/malatang.jpg">
						<div style="font-size: 17px;">
							川味麻辣烫
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥17 配送￥1<span style="float: right;">34分钟</span></p>
							<p><span class="mui-badge mui-badge-danger">麻辣烫</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">17减1</span></p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<!-- 第二个选项卡右侧 -->
		<div id="content2" class="mui-control-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a colr="#006833" name="兰州拉面" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
						<div style="font-size: 17px;">
							兰州拉面
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
							<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
							<p><span class="mui-badge mui-badge-success">拉面</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">0元配送</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#006833" name="兰州拉面" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
						<div style="font-size: 17px;">
							兰州拉面
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
							<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
							<p><span class="mui-badge mui-badge-success">拉面</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">0元配送</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#006833" name="兰州拉面" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
						<div style="font-size: 17px;">
							兰州拉面
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
							<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
							<p><span class="mui-badge mui-badge-success">拉面</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">0元配送</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#006833" name="兰州拉面" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
						<div style="font-size: 17px;">
							兰州拉面
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
							<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
							<p><span class="mui-badge mui-badge-success">拉面</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">0元配送</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#006833" name="兰州拉面" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
						<div style="font-size: 17px;">
							兰州拉面
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
							<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
							<p><span class="mui-badge mui-badge-success">拉面</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">0元配送</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#006833" name="兰州拉面" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/lanzhoulamian.jpg">
						<div style="font-size: 17px;">
							兰州拉面
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.5</span>月售2651</p>
							<p style="font-size: 12px;">起送￥20 免配送费<span style="float: right;">25分钟</span></p>
							<p><span class="mui-badge mui-badge-success">拉面</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">0元配送</span></p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<!-- 第三个选项卡右侧 -->
		<div id="content3" class="mui-control-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
						<div style="font-size: 17px;">
							黄焖鸡米饭
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
							<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
							<p><span class="mui-badge mui-badge-primary">米饭</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">25减3</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
						<div style="font-size: 17px;">
							黄焖鸡米饭
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
							<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
							<p><span class="mui-badge mui-badge-primary">米饭</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">25减3</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
						<div style="font-size: 17px;">
							黄焖鸡米饭
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
							<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
							<p><span class="mui-badge mui-badge-primary">米饭</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">25减3</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
						<div style="font-size: 17px;">
							黄焖鸡米饭
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
							<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
							<p><span class="mui-badge mui-badge-primary">米饭</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">25减3</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
						<div style="font-size: 17px;">
							黄焖鸡米饭
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
							<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
							<p><span class="mui-badge mui-badge-primary">米饭</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">25减3</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FFFFFF" name="黄焖鸡米饭" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/huangmenji.jpg">
						<div style="font-size: 17px;">
							黄焖鸡米饭
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3552</p>
							<p style="font-size: 12px;">起送￥20 配送￥1<span style="float: right;">30分钟</span></p>
							<p><span class="mui-badge mui-badge-primary">米饭</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">25减3</span></p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<!-- 第四个选项卡右侧 -->
		<div id="content3" class="mui-control-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
						<div style="font-size: 17px;">
							芝佳基汉堡店
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
							<p><span class="mui-badge mui-badge-purple">快餐</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">18减2</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
						<div style="font-size: 17px;">
							芝佳基汉堡店
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
							<p><span class="mui-badge mui-badge-purple">快餐</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">18减2</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
						<div style="font-size: 17px;">
							芝佳基汉堡店
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
							<p><span class="mui-badge mui-badge-purple">快餐</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">18减2</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
						<div style="font-size: 17px;">
							芝佳基汉堡店
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
							<p><span class="mui-badge mui-badge-purple">快餐</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">18减2</span></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a colr="#FE4C04" name="芝佳基汉堡店" href="javascript:;">
						<img class="reslogo" src="../images/restaurant/zhijiaji.jpg">
						<div style="font-size: 17px;">
							芝佳基汉堡店
							<p style="font-size: 12px;"><span style="color: red;margin-right: 7px;" >★4.7</span>月售3172</p>
							<p style="font-size: 12px;">起送￥15 配送￥1<span style="float: right;">7分钟</span></p>
							<p><span class="mui-badge mui-badge-purple">快餐</span>
							<div class="mui-numbox" data-numbox-min='0' style="float:right;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" value="0" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
							<span class="mui-badge mui-badge-danger">18减2</span></p>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- 餐品列表 END-->
	
	
	
	
<!-- CONTENT END -->














<script src="../js/mui.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//显示购物车
$(window).scroll(function(){
	var sc=$(window).scrollTop();
	if(sc>330){
		$("#gouwuche").css("display","block");
	}else{
		$("#gouwuche").css("display","none");
	}
})

// mui(".mui-numbox").on("tap",".mui-btn-numbox-minus",function(){
// 	var buyNumber = this.nextElementSibling;
// 	if(buyNumber.value == 0){
// 		console.log(0);
// 		buyNumber.setAttribute('style','display:none');
// 	}else{
// 		buyNumber.setAttribute("display","inline");
// 	}
// })
// 
// if(buyNumber.value == 0){
// 	buyNumber.style.display="none";
// }else{
// 	buyNumber.style.display="inline";
// }
mui(".mui-slider").slider({interval: 3000});
	
mui.init({
		swipeBack: true //启用右滑关闭功能
	});
	var controls = document.getElementById("segmentedControls");
	var contents = document.getElementById("segmentedControlContents");
//  	var html = [];
// 	var i = 1,
// 		j = 1,
// 		m = 11, //左侧选项卡数量+1
// 		n = 21; //每个选项卡列表数量+1
// 	for (; i < m; i++) {
// 		html.push('<a class="mui-control-item" data-index="' + (i - 1) + '" href="#content' + i + '">选项' + i + '</a>');
// 	}
// 	controls.innerHTML = html.join('');
// 	html = [];
// 	for (i = 1; i < m; i++) {
// 		html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
// 		for (j = 1; j < n; j++) {
// 			html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
// 		}
// 		html.push('</ul></div>');
// 	}
// 	contents.innerHTML = html.join('');
	//默认选中第一个
	controls.querySelector('.mui-control-item').classList.add('mui-active');
//	contents.querySelector('.mui-control-content').classList.add('mui-active');
	(function() {
		var controlsElem = document.getElementById("segmentedControls");
		var contentsElem = document.getElementById("segmentedControlContents");
		var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
		var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
		var controlWrapperElem = controlsElem.parentNode;
		var controlWrapperHeight = controlWrapperElem.offsetHeight;
		var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度
		var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight;//右侧内容最大可滚动高度
		var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度
		var controlTops = []; //存储control的scrollTop值
		var contentTops = [0]; //存储content的scrollTop值
		var length = contentListElem.length;
		for (var i = 0; i < length; i++) {
			controlTops.push(controlListElem[i].offsetTop + controlHeight);
		}
		for (var i = 1; i < length; i++) {
			var offsetTop = contentListElem[i].offsetTop;
			if (offsetTop + 100 >= maxScroll) {
				var height = Math.max(offsetTop + 100 - maxScroll, 100);
				var totalHeight = 0;
				var heights = [];
				for (var j = i; j < length; j++) {
					var offsetHeight = contentListElem[j].offsetHeight;
					totalHeight += offsetHeight;
					heights.push(totalHeight);
				}
				for (var m = 0, len = heights.length; m < len; m++) {
					contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
				}
				break;
			} else {
				contentTops.push(parseInt(offsetTop));
			}
		}
		contentsElem.addEventListener('scroll', function() {
			var scrollTop = contentsElem.scrollTop;
			for (var i = 0; i < length; i++) {
				var offsetTop = contentTops[i];
				var offset = Math.abs(offsetTop - scrollTop);
//				console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
				if (scrollTop < offsetTop) {
					if (scrollTop >= maxScroll) {
						onScroll(length - 1);
					} else {
						onScroll(i - 1);
					}
					break;
				} else if (offset < 20) {
					onScroll(i);
					break;
				}else if(scrollTop >= maxScroll){
					onScroll(length - 1);
					break;
				}
			}
		});
		var lastIndex = 0;
		//监听content滚动
		var onScroll = function(index) {
			if (lastIndex !== index) {
				lastIndex = index;
				var lastActiveElem = controlsElem.querySelector('.mui-active');
				lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
				var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
				currentElem.classList.add('mui-active');
				//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
				var controlScrollTop = controlWrapperElem.scrollTop;
				if (controlScrollTop + controlWrapperHeight < controlTops[index]) {
					controlWrapperElem.scrollTop = controlMaxScroll;
				} else if (controlScrollTop > controlTops[index] - controlHeight) {
					controlWrapperElem.scrollTop = 0;
				}
			}
		};
		//滚动到指定content
		var scrollTo = function(index) {
			contentsElem.scrollTop = contentTops[index];
		};
		mui(controlsElem).on('tap', '.mui-control-item', function(e) {
			scrollTo(this.getAttribute('data-index'));
			return false;
		});
	})();
	
	
mui.plusReady(function(){
	var currentWeb=plus.webview.currentWebview();
	//var bodyTitle = document.getElementsByClassName("mui-title")[0];
	var resimg = document.getElementById("resimg");
	var title_plus1 = document.getElementById("title_plus1");
	var title_plus2 = document.getElementById("title_plus2");
	//bodyTitle.innerHTML = currentWeb.title;
	title_plus1.style.backgroundColor = currentWeb.color;
	title_plus2.style.backgroundColor = currentWeb.color;
	console.log(currentWeb.color);
	resimg.src =currentWeb.resimg;
})

//打开购物车
document.getElementById("gouwuche").addEventListener("tap",function(){
	mui.openWindow({
		url:'../order/order_list.html',
		id:'order_list.html',
		show:{
			autoShow:true,
			aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
			duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		},
		styles:{
			titleNView: {
				type:'transparent',//透明渐变样式
				titleText: '...学院实训楼A110',
				backgroundColor: '#EC971F',
				titleColor: 'white',
				autoBackButton:true
			},
		},
		waiting:{
			autoShow:true,//自动显示等待框，默认为true
			title:'正在加载...',//等待对话框上显示的提示内容
		},
	})
});
</script>
</body>
</html>
